/**
 * @Description: 附近站点高德地图组件
 * @author tao.xie
 * @date 2019-07-22 11:42
*/
<template>
  <div id="container"></div>
</template>

<script>
import AMap from 'AMap'
export default {
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this._initMap()
  },
  methods: {
    _initMap() { // 初始化地图组件
      this.map = new AMap.Map('container', {
        zoom: 16, // 设置地图显示的缩放级别
        viewMode: '2D', // 设置地图模式
        lang: 'zh_cn', // 设置地图语言类型
        jogEnable: false // 地图是否使用缓动效果，默认值为true。此属性可被setStatus/getStatus 方法控制
      })
    },
    _drawCurrentPosition(pos) { // 设置地图的中心点位置，并放置定位，标记当前位置
      // 重新设置地图上的中心点
      this.map.setCenter([pos.longitude, pos.latitude])
      // 放置中心点
      let marker = new AMap.Marker({
        position: [pos.longitude, pos.latitude], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        icon: this.constructCurrentPositionAMapIcon(),
        offset: new AMap.Pixel(-15, -15)
      })
      this.map.add(marker)
    },
    _drawNearByStationList(stationList) { // 添加附近的站点定位点
      stationList.map(station => {
        let marker = new AMap.Marker({
          position: [station.LONGITUDE, station.LATITUDE], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          icon: this.constructStationAMapIcon(30, 30),
          offset: new AMap.Pixel(-15, -15),
          clickable: true, // 当前覆盖物是否可点击
          extData: station// 用户自定义属性，这里绑定站点的信息，以便点击时做数据透传
        })
        // 绑定点击事件
        marker.on('click', (e) => {
          this.updateSelectedExtDataToStore(marker.getExtData())
        })
        this.map.add(marker)
      })
    },
    constructCurrentPositionAMapIcon() { // 构建当前定位点的icon对象
      return new AMap.Icon({// icon对象，包含图片内容等
        image: require('../assets/point.png'),
        size: new AMap.Size(30, 30),
        imageSize: new AMap.Size(30, 30)
      })
    },

    constructStationAMapIcon(width, height, isBig = false) { // 构建站点icon对象
      return new AMap.Icon({// icon对象，包含图片内容等
        image: isBig ? require('../assets/station_big.png') : require('../assets/station.png'),
        size: new AMap.Size(width, height),
        imageSize: new AMap.Size(width, height)
      })
    },
    updateSelectedExtDataToStore(extData) {
      this.$store.dispatch('fetchSelectedStation', extData)
    },

    updateStationMarkerIconByExtData(extData) { // 根据给定的站点信息,更新地图中站点图标的大小
      if (this.map) {
        this.map.getAllOverlays('marker').map(marker => {
          let station = marker.getExtData()
          if (station.STATION_ID) { // 过滤非站点的marker,如当前的定位marker,需要过滤
            if (station === extData) {
              // 选中处理，图片变大
              marker.setIcon(this.constructStationAMapIcon(46, 46, true))
              marker.setOffset(new AMap.Pixel(-23, -23))
            } else {
              marker.setIcon(this.constructStationAMapIcon(30, 30))
              marker.setOffset(new AMap.Pixel(-15, -15))
            }
          }
        })
      }
    }

  },
  computed: {
    currentPos() { // 计算属性，当前定位数据
      return this.$store.getters.pos
    },
    nearbyStationList() { // 计算属性，附近站点列表
      return this.$store.getters.stationList
    },
    selectedStation() { // 计算属性，当前选中的站点
      return this.$store.getters.selectedStation
    }
  },
  watch: {
    currentPos(pos) {
      // 监听当前定位，当定位发生变化时，重新画地图上的点
      // 清空地图上的所有覆盖物
      this.map.clearMap()
      // 清除当前位置的定位点
      this._drawCurrentPosition(pos)
    },
    nearbyStationList(stationList) { // 监听器，当前站点发生变化时，重新绘制地图上的站点
      this._drawNearByStationList(stationList)
    },
    selectedStation(extData) { // 监听起，当store中的选中站点信息发生变更时,更新地图中站点的图标大小
      this.updateStationMarkerIconByExtData(extData)
    }
  }

}
</script>

<style scoped>
  #container{
    width:750px;
    height:calc(100% - 456px);
  }

</style>
